<!-- 
	动态组件：轮播图
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view
        class="dynamic-banner"
        :class="{ mixStyle: isMixSearchBanner }"
        :style="{ 'margin-left': getHeight(data.BannerMarginlr), 'margin-right': getHeight(data.BannerMarginlr) }">
        <swiper
            class="swiper-banner"
            @change="swiper"
            autoplay
            circular
            :indicator-active-color="getColor()"
            indicator-dots
            :interval="data.BannerAutoTime ? data.BannerAutoTime * 1000 : defaultInterval"
            :style="{ height: imageHeight + 'rpx' }">
            <swiper-item v-for="(item, index) in data.BannerList" :key="index">
                <image
                    class="image"
                    @load="imgLoad"
                    :src="item.Image"
                    mode="widthFix"
                    :style="{ 'border-radius': getHeight(data.BannerRadius) }"
                    @click="click(item)"></image>
            </swiper-item>
        </swiper>
        <view class="mixBg" v-if="isMixSearchBanner"></view>
    </view>
</template>

<script>
import { getHeight } from "./utils/util.js"
import { getMainColor } from "./utils/util.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        isMixSearchBanner: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            defaultInterval: 3000,
            currentSwiper: "",
            imageWidth: 0,
            imageHeight: 0,
        }
    },

    mounted() {
        this.$emit("loadBack", this.data.index)
    },
    methods: {
        swiper(e) {
            this.currentSwiper = e.detail.current
        },
        click(item) {
            this.$emit("bannerClick", item)
        },
        getColor() {
            return getMainColor()
        },
        getHeight(height) {
            return getHeight(height)
        },
        imgLoad(e) {
            if (this.imageHeight == 0) {
                let originalWidth = e.detail.width
                let originalHeight = e.detail.height
                this.imageHeight = originalHeight
                console.log(this.imageHeight)
            }
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.dynamic-banner {
    position: relative;
    .swiper-banner {
        position: relative;
        z-index: 1;
        height: 360rpx;
        .image {
            width: 100%;
            height: 100%;
        }
    }
}
.mixStyle {
    padding: 10rpx $app-page-padding $app-page-padding;
    .swiper-banner {
        border-radius: 32rpx;
        height: 360rpx;
        overflow: hidden;
    }
}
.mixBg {
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    height: 300rpx;
    background: $app-color-main;
    border-radius: 0 0 80rpx 80rpx;
}
</style>
